<template>
  <div>
    <z-table
      :title="tableOptions.title"
      :searchSchemas="searchSchemas"
      :tableProps="tableProps"
      :actionColumn="tableOptions.actionColumn"
      :dataSourceApi="tableOptions.dataSourceApi"
      :getSorterParams="tableOptions.getSorterParams"
    >
    </z-table>
  </div>
</template>

<script lang="tsx" setup>
import { deleteUserById, getUserList } from "@/api/octp/routes/user";
import { ZPaginationOptions } from "@/components/Table/typings";
import ZTable from "@components/Table/ZTable.vue";
import { genDeleteAction } from "@components/Table/helpers/actions";
import { reactive } from "vue";
import { getColumns, getSearchSchemas } from "./data";

const demoPagination = reactive<ZPaginationOptions>({
  showSizePicker: true,
  showQuickJumper: false,
  showTotal: true,
  defaultPageSize: 5,
});

const searchSchemas = getSearchSchemas();

const tableProps: any = reactive({
  bordered: true,
  striped: true,
  columns: getColumns(),
  remote: true,
  pagination: demoPagination,
});

const tableOptions = reactive({
  title: "用户列表",
  dataSourceApi: getUserList,
  actionColumn: genDeleteAction(deleteUserById),
  getSorterParams: (sorter: any) => {
    return {
      order: JSON.stringify(sorter),
    };
  },
});
</script>
